<template>
  <div class="all">
    <van-nav-bar
      class="head"
      title="零食投票"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-row>
      <van-col span="12"
        ><van-button
          icon="https://s2.loli.net/2021/12/11/NZQsaWGvnygBPx8.png"
          type="info"
          color="rgba(42, 131, 78, 1)"
        >
          投票列表
        </van-button></van-col
      >
      <van-col span="12"
        ><van-button
          icon="https://s2.loli.net/2021/12/11/Us6BgGWbE75H13A.png"
          type="primary "
          plain
          color="rgba(42, 131, 78, 1)"
        >
          优选服务
        </van-button></van-col
      >
    </van-row>

    <van-grid :border="false" :column-num="2" :square="false">
      <van-grid-item v-for="(item, index) in list" :key="index" to="/?">
        <van-image :src="item.src" />
        <van-row class="title">
          <van-col span="12" class="name">{{ item.name }}</van-col>
          <van-col span="12" class="chose">
            <van-col span="12"
              ><span class="ding">顶</span
              ><span class="mark">{{ item.ding }}</span></van-col
            >
            <van-col span="12"
              ><span class="cai">踩</span>
              <span class="mark">{{ item.cai }}</span></van-col
            >
          </van-col>
        </van-row>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage1.suning.cn%2Fuimg%2Fb2c%2Fnewcatentries%2F0070061119-000000000696028891_1_800x800.jpg&refer=http%3A%2F%2Fimage1.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642820191&t=11ec89603f0501eba2d3994fded50628",
          name: "零食大礼包",
          ding: "630",
          cai: "103",
        },
        {
          src: "https://img1.baidu.com/it/u=3315094383,3106652300&fm=26&fmt=auto",
          name: "全家福",
          ding: "500",
          cai: "100",
        },
        {
          src: "https://img2.baidu.com/it/u=62401075,4210527632&fm=26&fmt=auto",
          name: "坚果大礼包",
          ding: "450",
          cai: "99",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb1.hucdn.com%2Fupload%2Fitem%2F1604%2F20%2F45626359268338_500x500.jpg&refer=http%3A%2F%2Fb1.hucdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642835871&t=d358c55641da01260e1d7b40b1d7e742",
          name: "辣皮大礼包",
          ding: "700",
          cai: "88",
        },
        {
          src: "https://img2.baidu.com/it/u=1991007867,3240348673&fm=26&fmt=auto",
          name: "零食大礼包",
          ding: "400",
          cai: "28",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201308%2F22%2F20130822075312_NtWZr.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642835957&t=ce8ef0dd2125fb05cf8e8dcadc9d3b62",
          name: "杏仁大礼包",
          ding: "590",
          cai: "80",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg10.360buyimg.com%2Fimgzone%2Fjfs%2Ft3226%2F304%2F9350628773%2F178687%2F9489f307%2F58d226c1Nc4add8e5.jpg&refer=http%3A%2F%2Fimg10.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642836026&t=c080f362eda55b154fdc4c0d1b301df7",
          name: "果脯大礼包",
          ding: "630",
          cai: "103",
        },
        {
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.t-jiaju.com%2FtujjJDEwLmFsaWNkbi5jb20vaTMvNzI1Njc3OTk0L08xQ04wMXNDMkR0VzI4dklkcmx3YWVNXyEhNzI1Njc3OTk0JDk.jpg&refer=http%3A%2F%2Fwww.t-jiaju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642836026&t=fd7acf25644c045cb60fedfd2946f55d",
          name: "大食桶",
          ding: "630",
          cai: "103",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/Member" }).catch((error) => error);
    },
  },
};
</script>

<style scoped lang='less'>
.all {
  .head {
    width: 100%;
    height: 51px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(239, 239, 239, 1);
    position: fixed;
    top: 0;
    left: 0;
  }
  /deep/.van-nav-bar .van-icon {
    color: rgba(153, 153, 153, 1);
  }
  /deep/.van-nav-bar__title {
    color: rgba(42, 131, 78, 1);
    font-size: 18px;
  }
  padding: 0 18px;
  padding-top: 67px;
  padding-bottom: 32px;
  .van-button {
    border-radius: 6px;
    width: 168px;
    height: 41px;
  }

  .van-grid-item {
    width: 158px;
    height: 179px;

    .van-image {
      height: 149px;
    }
    .title {
      width: 158px;
      height: 30px;
      padding-top: 8px;
      font-size: 10px;
      .name {
        color: rgba(80, 80, 80, 1);

        text-align: left;
      }
      .chose {
        width: 50%;
        font-size: 10px;
        .ding {
          color: rgba(67, 207, 124, 1);

          text-align: left;
        }
        .cai {
          color: rgba(212, 48, 48, 1);
          text-align: left;
        }
        .mark {
          color: rgba(80, 80, 80, 1);
          font-size: 8px;
        }
      }
    }
  }
}
</style>